<template>
  <div class="reward-mask" v-if="reward.reward_show">
    <div class="bg-mask" @click="reward.reward_show = false"></div>
    <div class="cons">
      <div class="con">
        <p class="title">请选择打赏金额：</p>
        <div class="reward-card clear">
          <div class="item" :class="(card == 2) ? 'active' : ''" @click="rewardCard('2')">2元 <img src="@/assets/dashang.png" v-if="card == 2" alt=""></div>
          <div class="item" :class="(card == 5) ? 'active' : ''" @click="rewardCard('5')">5元 <img src="@/assets/dashang.png" v-if="card == 5" alt=""></div>
          <div class="item" :class="(card == 8) ? 'active' : ''" @click="rewardCard('8')">8元 <img src="@/assets/dashang.png" v-if="card == 8" alt=""></div>
          <div class="item" :class="(card == 10) ? 'active' : ''" @click="rewardCard('10')">10元 <img src="@/assets/dashang.png" v-if="card == 10" alt=""></div>
        </div>
      </div>
      <div class="con">
        <p class="title">请输入自定义金额：</p>
        <div class="div-input" @click="rewardCard(0)">
          <input type="text" placeholder="自定义金额" v-model="card"> 
          <span>元</span>
        </div>        
      </div>
      <span class="btn" @click="submit"><img src="@/assets/kechenxiangqing5.png" alt="">确认打赏{{card}}元</span>
    </div>
  </div>
</template>

<script>
import { rewards } from '@/api/api'
import { wexinPay } from '@/config/wxpay.js'

export default {
  props: {
    'reward': {
      type: Object,
      required: false
    },
  },
  components: {
  },
  data () {
    return {
      card: 2,
      money: '',
    }
  },
  watch:{
    reward(curVal,oldVal){
      if(curVal){
        this.reward = curVal;
      }
    },
  },
  created () {
  },
  methods: {
    rewardCard(index) {
      this.card = index
      if(index == 0){
        this.card = this.money
      }
    },
    submit() {
      this.reward.reward_show = false
      if(this.card == 0){
        this.card = this.money
      }
      var jsonData = {
        title: this.reward.title,
        uid: sessionStorage.getItem('uid'),
        money: this.card
      }
      rewards(jsonData).then((res) => {
        var data = res.data.info
        wexinPay(data, (res) => {
          AlertModule.show({
            title: '温馨提示',
            content: '打赏成功',
            onHide: () => {
              this.$router.push({
                path: 'rewardSucces'
              })
            }
          })
        }, (err) => {
        })
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.reward-mask
  position fixed
  top 0
  left 0
  width 100vw
  height 100vh
  .bg-mask
    position absolute
    width 100vw
    height 100vh
    overflow hidden
    background-color rgba(0,0,0,.6)
    left 0
    top 0
  .cons
    position absolute
    width 90%
    left 5%
    background-color #fff
    border-radius .3rem
    padding 0 2rem
    box-sizing border-box
    padding-bottom 2rem
    top 10rem
    .title
      font-size 1.5rem
      color #333
      font-weight bold
      line-height 1.5rem
      height 1.5rem
      margin-top 3rem
    .reward-card
      .item
        width calc(50% - .75rem)
        height 3.5rem
        line-height 3.5rem
        text-align center
        border .1rem solid #ccc
        font-size 1.5rem
        color #ccc
        float left
        margin-top 2rem
        margin-right 1.5rem
        box-sizing border-box
        &:nth-child(2n)
          margin-right 0
      .active
        border .1rem solid #FF659B
        color #FF659B
        position relative
        img
          position absolute
          width 1.8rem
          height 1.8rem
          right 0
          bottom 0
    .div-input
      width 100%
      line-height 3.5rem
      height 3.5rem
      border .1rem solid #ccc
      box-sizing border-box
      position relative
      margin-top 2rem
      margin-bottom 4rem
      input
        position absolute
        width 100%
        height 3.3rem
        line-height 3.3rem
        outline none
        box-sizing border-box
        border none
        padding-left 1.1rem
        font-size 1.5rem
        color #333
      span
        position absolute
        height 3.5rem
        line-height 3.5rem
        right 1.1rem
        top 0
        font-size 1.5rem
    .btn
      width 100%
      height 4.8rem
      line-height 4.8rem
      background-color #FF659B
      border-radius 100px
      color #fff
      display block
      text-align center
      font-size 1.7rem
      img
        width 2.2rem
        display inline-block
        vertical-align middle
        position relative
        top -.2rem
        margin-right 1rem
</style>